<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="/js/axios.min.js"></script>
    <script type="text/javascript">
        $(function(){
            const app = {
              data() {
                return {
                  info: 'Ajax 测试!!'
                }
              },
              mounted () {
                axios
                  .get('/vueGetString.action?param1=Hello!&param2=Java')
                  .then(response => (this.info = response.data))
                  .catch(function (error) {
                    console.log(error);
                });
              }
            }
            Vue.createApp(app).mount('#app')

            const app2 = {
              data() {
                return {
                  info: "什么也没有"
                }
              },
              mounted () {
                axios
                  .get('/vueGetJson.action', {
                    params: {
                      param1: 12345,
                      param2: 54321
                    }
                  })
                  .then(response => (this.info = response.data))
                  .catch(function (error) {
                    console.log(error);
                  });
              }
            }
            Vue.createApp(app2).mount('#app2')

            const app3 = {
              data() {
                return {
                  info: '黑人问号'
                }
              },
              mounted () {
                axios
                  .post('/vuePostString.action',{
                      firstName: 'Fred',
                      lastName: 'Flintstone'
                  })
                  .then(response => (this.info = response.data))
                  .catch(function (error) {
                    console.log(error);
                  });
              }
            }
            Vue.createApp(app3).mount('#app3')
        })
    </script>
</head>
<body>
<div id="app">
   -> {{ info }}
</div>
<br>
<div id="app2">
  <div v-for="site in info">
     -> {{ site }}
  </div>
</div>
<br>
<div id="app3">
   -> {{ info }}
</div>
</body>
</html>